<template>
  <div style= "height: 100%; width: 100%;background: white;" class="layoutVerticle">
    <div class="layoutVerticle" style="padding-top: 10px; padding-bottom: 10px; background: #3676F5;color: white; padding-left: 20px; padding-right: 20px;">
      <div class="layoutHorizontal" style="margin-top: 20px;">
        <img :src="userInfo['headPhotoUrl']" style="width: 80px;height: 80px;border-radius: 50px;box-shadow: 0 0 0 1px white;"/>
        <div class="layoutVerticle" style="margin-left: 22px;">
          <div class="layoutHorizontal verticleCenter" style="">
            <span style="font-size: 15px;">{{userInfo['username'] || userInfo['mobile']}}</span>
            <span style="border-radius: 50px 50px 50px 50px; color: white; background: #71a4e3; padding-left: 5px; padding-right: 5px; font-size: 12px;padding-top: 2px; padding-bottom: 2px;margin-left: 10px;">已认证</span>
          </div>
          <div class="layoutHorizontal verticleCenter" style="margin-top: 5px;">
            <img src="@/assets/icon/mine/idouicon.png" style="width: 16px;height: 16px;"/>
            <span style="font-size: 15px; margin-left: 4px;"> i 豆 : {{userInfo['idouNum']}}</span>
          </div>
          <div class="layoutHorizontal verticleCenter" style="margin-top: 5px;">
            <img src="@/assets/icon/mine/pencil.png" style="width: 13px; height: 13px; margin-right: 4px;"/>
            <span @click="personalInfomation" style="font-size: 13px;">个人信息 {{userInfo['dataRate']}}%</span>
          </div>
          
        </div>
      </div>
      <div class="layoutHorizontal" style="margin-top: 20px;">
        <div class="layoutVerticle" style="align-items: center;flex: 1;">
          <span style="font-size: 19px;">2</span>
          <span style="font-size: 12px;">我喜欢的</span>
        </div>
        <div class="layoutVerticle" style="align-items: center;flex: 1;">
          <span style="font-size: 19px;">20</span>
          <span style="font-size: 12px;">喜欢我的</span>
        </div>
        <div class="layoutVerticle" style="align-items: center;flex: 1;">
          <span style="font-size: 19px;">201</span>
          <span style="font-size: 12px;">最近来访</span>
        </div>
      </div>
    </div>
    <van-cell title="推荐给好友" @click="recommendFriends" value=""  is-link  style="margin-top:10px">
      <template slot="icon">
        <img src="@/assets/icon/mine/friends.png"  style="height: 16px; margin-right: 10px; margin-top: 3px;"/>
      </template>
    </van-cell >
    <van-cell title="隐私设置"  @click="privacySetting" value=""  is-link >
      <template slot="icon">
        <img src="@/assets/icon/mine/privacy.png"  style="height: 16px; margin-right: 10px; margin-top: 3px;"/>
      </template>
    </van-cell >
    <van-cell @click="securityCenter"  title="安全中心" value=""  is-link >
      <template slot="icon">
        <img src="@/assets/icon/mine/security.png"  style="width: 16px; height: 16px;margin-right: 10px; margin-top: 3px;"/>
      </template>
    </van-cell >
    <van-cell @click="helpAndFeedback" title="帮助与反馈" value=""  is-link >
      <template slot="icon">
        <img src="@/assets/icon/mine/help.png"  style="height: 16px; margin-right: 10px; margin-top: 3px;"/>
      </template>
    </van-cell >
    <van-cell @click="aboutUs"  title="关于我们" value=""  is-link >
      <template slot="icon">
        <img src="@/assets/icon/mine/about.png"  style="width: 16px; height: 16px; margin-right: 10px; margin-top: 3px;"/>
      </template>
    </van-cell >

    <div class="layoutVerticle" style="position: fixed; bottom: 75px; width: 100%;">
      <span style="font-size: 12px; margin-left: auto;margin-right: auto; color: #3676F5;">缘来号 : {{userInfo['platformId']}}</span>
      <van-button @click="requestLogout" type="primary" style="margin-left: 12%; margin-right: 12%;margin-top: 10px;border-radius: 8px;height: 40px;" >
        退出登陆
      </van-button>
    </div>
    
  </div>
</template>

<script>
import { Http, Uploader } from "@/common/HttpClient";
import { MapUtil } from "@/common/mapUtil";
import { NativeUtil } from "@/common/utils";
import * as turf from "@turf/turf";
import { Toast, Notify } from "vant";

export default {
  components: {},
  data() {
    return {
      recommentSex:'',
      SEX_BOY:'1',
      SEX_GIRL:'2',
      userInfo:{
        dataRate:0,
        username:'',
        platformId:'',
        headPhotoUrl: require('@/assets/icon/mine/cat.png'),
      },
      

    };
  },

  created(){
    this.requestUserInfo();
  },

  mounted() {
    this.handleMessage = (data) => {
      this.requestUserInfo();
    }
    // this.$bus.$off(['refreshUserInfo'])
    this.$bus.$on('refreshUserInfo', this.handleMessage);

  },
  beforeDestroy() {
    this.$bus.$off('refreshUserInfo', this.handleMessage);
  },
  destroyed() {
  },
  activated() {
    // if(sex == this.SEX_BOY){
    //   console.log("性别：女生");
    //   this.recommentSex = '女生';
    // } else if(sex == this.SEX_GIRL){
    //   this.recommentSex = '男生';
    //    console.log("性别：男生");
    // }
  },
  methods: {
    requestUserInfo(){
      let that = this
      Http.instance()
        .postJSON({
          url: "/makeFriends/sys/user/info",
          params: {
          },
        })
        .then((result) => {
          console.log("用户信息：" + JSON.stringify(result));
          if(result && result['user']){
            this.userInfo = result['user'];
            if(this.userInfo["headPicture"]){
              this.userInfo["headPhotoUrl"] = new Uploader().formatImgPath(this.userInfo["headPicture"]);
            }else {
              this.userInfo["headPhotoUrl"] = require('@/assets/icon/mine/cat.png');
            }
            if(this.userInfo['dataRate'] != null){
              var data = this.userInfo['dataRate'];
              // 1. 计算百分率数值（0.255再乘以100）
              const percentageValue = data* 100;
              // 1. 提取整数部分（向下取整，忽略小数）
              const integerPart = Math.floor(percentageValue); 
              console.log("数据：" + integerPart);
              this.userInfo['dataRate']  = integerPart;
            }
          }
        }).catch((result) =>{
          console.log("错误信息：" + result);
          Notify({
            type: "danger",
            message: "" + result,
          });
        });
    },

    requestLogout(){
      let that = this
      Http.instance()
        .postJSON({
          url: "/makeFriends/sys/logout",
          params: {
          },
        })
        .then((result) => {
          console.log("退出登陆：" + JSON.stringify(result));
          localStorage.removeItem("userContextStr");
          this.$router.replace({ name: 'Login' });
        }).catch((result) =>{
          console.log("错误信息：" + result);
          this.$router.replace({ name: 'Login' });
          Notify({
            type: "danger",
            message: "" + result,
          });
        });
    },

    
    personalInfomation(){
      this.$router.push({ name: 'PersonalInfomation' , query: { userId: this.userInfo['userId'] }});
    },


    helpAndFeedback(){
      console.log("点击");
      this.$router.push({ name: 'HelpAndFeedback' });
    },

    recommendFriends(){
      console.log("点击");
      this.$router.push({ name: 'RecommendFriends' , query: { userId: this.userInfo['userId'] }});
    },

    modifyHeadPhoto(){
      console.log("点击");
      this.$router.push({ name: 'ModifyHeadPhoto' , query: { userId: this.userInfo['userId'] }});
    },

    privacySetting(){
      console.log("点击");
      this.$router.push({ name: 'PrivacySetting' , query: { userId: this.userInfo['userId'] }});
    },

    securityCenter(){
      console.log("点击");
      this.$router.push({ name: 'SecurityCenter' , query: { userId: this.userInfo['userId'] }});
    },

    aboutUs(){
      this.$router.push({ name: 'AboutUs' });
    },

    

    

    
    
    
    





  },
};
</script>

<style lang="less" scoped>
  .layoutVerticle{
    display: flex;
    flex-direction: column;
  }

  .layoutHorizontal{
    display: flex;
    flex-direction: row;
  }

  .verticleCenter {
    align-items: center;
  }

  .layoutCenter{
    justify-content: center;
    align-items: center;
  }

  /deep/.van-cell {
      padding: 10px 20px;
  }






</style>